<template>
  <div class="my">
    <van-nav-bar title="我的">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <van-image
      class="pic1"
      round
      width="10rem"
      height="10rem"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <p class="text" v-show="isTrue">中原一点红</p>
    <p class="text" v-show="isShow">请登录</p>
     <input type="button" value="立即退出" @click="out" class="ipt2" v-show="isTrue"/>
    <input type="button" value="立即登录" @click="go" v-show="isShow" class="ipt3"/>

    <van-row class="adress">
      <van-col span="2">
        <van-icon name="cart-o" size="18" />
      </van-col>
      <van-col span="20">地址管理</van-col>
      <van-col span="2">
        <van-icon name="arrow" size="18" />
      </van-col>
    </van-row>
    <van-row class="adress">
      <van-col span="2">
        <van-icon name="cart-o" size="18" />
      </van-col>
      <van-col span="20">收藏管理</van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      isTrue: true,
    };
  },
    methods:{
        go(){
            this.isShow=true
            this.isTrue=false
            this.$router.push('/login')
        },
        out(){
            this.isTrue=false
            this.isShow=true
            localStorage.removeItem('userInfo')
        },
    }
};
</script>

<style>
.my .pic1 {
  margin-left: 110px;
  margin-top: 30px;
  margin-bottom: 6px;
}
.my .text {
  width: 100%;
  text-align: center;
  font-size: 18px;
  margin-bottom: 50px;
}
.my .pic2 {
  width: 300px;
  height: 40px;
  border: none;
  background: rgb(197, 25, 25);
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 16px;
  margin-left: 45px;
  margin-bottom: 20px;
}
.my .pic3 {
  width: 300px;
  height: 40px;
  border: none;
  background: rgb(14, 114, 14);
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 16px;
  margin-left: 45px;
  margin-bottom: 20px;
}
.my .ipt1{
  width: 300px;
  height: 40px;
  border: none;
  background: rgb(197, 25, 25);
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 16px;
  margin-left: 45px;
  margin-bottom: 20px;
}
.my .ipt2{
  width: 300px;
  height: 40px;
  border: none;
  background: rgb(14, 114, 14);
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 16px;
  margin-left: 45px;
  margin-bottom: 20px;
}
.my .adress{
    height: 50px;
    font-size: 15px;
    background: white;
    padding: 13px 0 0 8px;
    box-sizing: border-box;
    border-bottom: 1px solid #afaeaf;
}
</style>